<template>
  <div class="person-container">
    <div class="person-info box-shadow">
      <div class="avater">
        <img class="avater-img" :src="userInfo.avatar ? userInfo.avatar : defaultAvatar" />
      </div>
      <div class="info">
        <!--编辑状态-->
        <template v-if="isEdit">
          <el-form :model="form">
            <el-form-item prop="username" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
              <div class="info-title">
                <el-input style="width: 220px;" placeholder="用户名" v-model="form.username" />
                <div>
                  <el-button type="primary" @click="editUser()">确认修改</el-button>
                  <el-button type="danger" @click="isEdit = false">取消编辑</el-button>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="email" :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' }]">
              <el-input style="width: 220px;" placeholder="邮箱" v-model="form.email" />
            </el-form-item>

            <el-form-item prop="city" :rules="[{ required: true, message: '请输入城市', trigger: 'blur' }]">
              <el-input style="width: 220px;" placeholder="城市" v-model="form.city" />
            </el-form-item>
          </el-form>
        </template>
        <!--查看状态-->
        <template v-else>
          <div class="info-title">
            <div class="title">{{ userInfo.username }}</div>
            <el-button type="primary" @click="isEdit = true">编辑</el-button>
          </div>
          <div class="content">
            <div class="flex-row m-24">
              <svg-icon icon-class="email" size="15" />
              <div>邮箱:{{ userInfo.email }}</div>
            </div>
            <div class="flex-row m-24">
              <svg-icon icon-class="dizhi" size="16" />
              <div>城市:{{ userInfo.city }}</div>
            </div>

          </div>
        </template>

        <div class="m-24">您已发布<span style="font-size: 20px;margin: 0 10px;">{{ data.articeData.total }}</span>篇文章</div>
      </div>
    </div>

    <div class="person-list-container box-shadow">
      <template v-if="data.artices.length > 0">
        <div class="article-list" v-for="item in data.artices">
          <div class="item" @click="goArticleDerail(item.articleId)">
            <div class="title">{{ item.articleTitle }}</div>
            <div class="flex-row" style="margin-top: 12px;">
              <svg-icon icon-class="day" />
              <div>{{ dayjs(item.updateDate).format('YYYY-MM-DD') }}</div>
            </div>
            <div class="article-content">{{ item.articleIntro }}</div>
            <div class="item-footer">
              <div class="tags">
                <div>{{ item.author }}</div>
                <el-divider direction="vertical" />
                <div class="flex-row" @click="likesClick(item.articleId)">
                  <svg-icon icon-class="likes" v-if="item.isLike === 0" />
                  <svg-icon icon-class="likesed" v-else />
                  <div>{{ item.likes }}</div>
                </div>
                <el-divider direction="vertical" />
                <div class="flex-row">
                  <svg-icon icon-class="comment" />
                  <div>{{ item.commentCount }}</div>
                </div>
              </div>
              <div class="tags">
                <el-tag v-for="item in item.articleTags">{{ item }}</el-tag>
              </div>
            </div>
          </div>
        </div>
        <div class="page-container">
          <el-pagination v-model:current-page="data.page" v-model:page-size="data.size" small layout="prev, pager, next"
            :total="data.articeData.total" @current-change="curChange()" />
        </div>
      </template>

      <template v-else>
        <div class="no-comtent">
          您未发布有任何文章，请开始你的创作！
        </div>

      </template>

    </div>

  </div>
</template>

<script setup>
import { myArticles, likeArticle } from '@/api/article'
import { edit } from '@/api/user'
import { ref, reactive } from 'vue'
import dayjs from 'dayjs'
import SvgIcon from '@/components/SvgIcon.vue'
const router = useRouter();
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { useUser } from '../stores/user'
import { ElMessage } from 'element-plus';
const { userInfo } = storeToRefs(useUser())
const { setInfo } = useUser()
const defaultAvatar = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'


const form = reactive({
  id: userInfo.value.id,
  username: userInfo.value.username,
  email: userInfo.value.email,
  city: userInfo.value.city
})

const isEdit = ref(false)

async function editUser() {
  console.log(form)
  await ElMessageBox.confirm('是否确定修改用户信息？', '提示').then(async () => {
    const res = await edit(form)
    setInfo(res)
    ElMessage.success("修改成功")
    isEdit.value = false
  })

}


const data = reactive({
  // 文章列表
  articeData: {},
  artices: [],
  size: 5,
  page: 1,
  isdisabled: false
})
async function getData() {
  data.articeData = await myArticles({ size: data.size, currentPage: data.page })

  data.artices = data.articeData.records.map(item => {
    item.articleTags = item.articleTags.split(",")
    return item
  })

}
getData()

function curChange() {
  getData()
}


function goArticleDerail(articleId) {
  router.push(`/article?articleId=${articleId}`)
}

// 点赞
async function likesClick(articleId) {

  event.stopPropagation();
  const res = await likeArticle(articleId)
  if (res) {
    ElMessage.success(res)
  }
  data.artices = data.artices.map(item => {
    if (item.articleId === articleId && item.isLike === 0) {
      item.isLike = 1
      item.likes++
    }
    return item
  })
}
</script>

<style lang="scss" scoped>
.person-container {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
}

.person-info {
  padding: 20px;
  display: flex;
}

.info {
  margin-left: 30px;
  flex: 1;


}

.info-title {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
  }
}

.content {
  font-size: 0.6rem;
  line-height: 1.5;
  // color: #72777b;

  .span {
    color: #222226;
    font-weight: 600;
    font-size: 30px;
  }
}

.avater {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-size: cover;

  .avater-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
  }
}


.person-list-container {
  margin-top: 12px;
}

.article-list {
  margin: 10px;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 0;
  margin: 0 24px;
  border-bottom: 1px solid #f0f0f2;

  .article-content {
    margin: 10px 0;
  }

  .item-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;

    .tags {
      display: flex;
      align-items: center;

      .el-tag {
        margin-left: 6px;
      }
    }

  }
}

.page-container {
  display: flex;
  justify-content: center;
  padding: 22px;
}

.title {
  font-weight: 600;
  font-size: 20px;
  line-height: 22px;
  width: 100%;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.no-comtent {
  height: 400px;
  text-align: center;
  line-height: 400px;
  font-size: 18px;
  color: #d1d5db;
}
</style>